/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="user-resource-wrap">
        <div class="user-resource__top">
            <header>
                <span class="title">
                    <lang>资源使用情况</lang>
                </span>
                <i class="iconfont iconsip-refresh refresh" @click="getUserResourceData"></i>
            </header>
            <div class="user-resource__top-chart">
                <distribution :data="pieChartsData" class="user-resource__top-chart-item"></distribution>
                <gpu-user :data="vGpuAllocatedGraphList" class="user-resource__top-chart-item"></gpu-user>
                <data-space ref="dataSpace" class="user-resource__top-chart-item"></data-space>
            </div>
            <resource-usage-trend></resource-usage-trend>
        </div>
    </div>
</template>

<style lang="less" scoped>
.user-resource-wrap {
    width: 100%;
    color: #14161A;
    margin-bottom: 20px;
    header {
        font-size: 16px;
        padding: 0 12px;
        height: 48px;
        line-height: 48px;
        .title {
            font-weight: bold;
        }
    }

    .user-resource__top {
        /*background-color: #fff;*/

        .refresh {
            margin-left: 8px;
            cursor: pointer;
        }
    }
    .user-resource__top-chart {
        display: flex;
        justify-content: space-between;
    }
}
//
</style>

<script>
import Distribution from './common/distribution';
import GpuUser from './common/gpu_user';
import ResourceUsageTrend from './common/resource_usage_trend';
import DataSpace from './common/data_space';


export default {
    components: {
        Distribution,
        GpuUser,
        ResourceUsageTrend,
        DataSpace
    },
    props: {
        fromPage: {
            type: String
        }
    },
    provide() {
        return {
            lineChartDate: () => this.nowDate
        }
    },
    data () {
        return {
            nowDate: 0,

            chartsData: [],
            pieChartsData: [],

            vGpuAllocatedGraphList: []
        };
    },

    methods: {
        getUserResourceData () {
            this.$emit('refresh-resource');
            this.nowDate = new Date().getTime();
            this.$refs.dataSpace?.initDataSpace();
        },
        getPieChartsData () {
            if (this.chartsData && this.chartsData.length) {
                let maxLen = 5;
                let tempArr = this.chartsData.slice(0, maxLen);
                this.pieChartsData = tempArr.map((item, index) => {
                    item.id = 'pie_chart' + index;
                    return item;
                });
            }
        },

        setJsonValue (data) {
            let {
                totalCpu,
                totalCpuUsage,
                totalMemory,
                totalMemoryUsage,
                totalRemainedCpu,
                totalRemainedMemory,
                totalRemainedStorage,
                totalStorage,
                totalStorageUsage,
                totalUsedCpu,
                totalUsedMemory,
                totalUsedStorage,
                allocateTotalCpu,
                remainedAllocatedTotalCpu,
                allocatedTotalCpuUsage,
                allocatedTotalMemory,
                remainedAllocatedTotalMemory,
                allocatedTotalMemoryUsage,
                allocatedTotalStorage,
                remainedAllocatedTotalStorage,
                allocatedTotalStorageUsage,

                totalGpuMemory,
                allocatedTotalVGpuMemory,
                vGpuAllocatedGraphList,
                allocatedTotalVGpuMemoryUsage
            } = data;
            let userList = [{
                total: totalCpu, user: totalUsedCpu, noUser: totalRemainedCpu,
                userPercent: totalCpuUsage,
                allocated: allocateTotalCpu,
                noAllocated: remainedAllocatedTotalCpu,
                allocatedPercent: allocatedTotalCpuUsage
            }, {
                total: totalGpuMemory,
                noAllocated: (totalGpuMemory - allocatedTotalVGpuMemory) < 0 ? 0 : (totalGpuMemory - allocatedTotalVGpuMemory),
                allocated: allocatedTotalVGpuMemory,
                allocatedPercent: allocatedTotalVGpuMemoryUsage
            }, {
                total: totalMemory, user: totalUsedMemory, noUser: totalRemainedMemory, userPercent: totalMemoryUsage,
                allocated: allocatedTotalMemory,
                noAllocated: remainedAllocatedTotalMemory,
                allocatedPercent: allocatedTotalMemoryUsage
            }, {
                total: totalStorage,
                user: totalUsedStorage,
                noUser: totalRemainedStorage,
                userPercent: totalStorageUsage,
                allocated: allocatedTotalStorage,
                noAllocated: remainedAllocatedTotalStorage,
                allocatedPercent: allocatedTotalStorageUsage
            }];

            let initList = [
                { title: 'CPU', total: 0, user: 0, noUser: 0, unit: _('核'), icon: 'iconcpu-copy', color: '#6063FF'},
                {title: 'vGPU', total: 8, user: 0, noUser: 0, icon: 'iconGPU-copy', unit: _('G'), color: '#6063FF', type: 'vgpu'},
                { title: '内存', total: 0, user: 0, noUser: 0, icon: 'iconneicun1-copy', unit: _('G'), color: '#7F1DFF'},
                { title: _('存储'), total: 0, user: 0, noUser: 0, icon: 'iconkongjian-copy', unit: _('G'), color: '#7F1DFF' }
            ];
            // 则是NFS存储，不显示。
            if (totalStorage < 0) {
                initList.pop();
            }

            this.chartsData = initList.map((item, index) => {
                item.total = userList[index].total;
                item.user = userList[index].user;
                item.noUser = userList[index].noUser;
                item.userPercent = userList[index].userPercent;
                item.allocated = userList[index].allocated;
                item.noAllocated = userList[index].noAllocated;
                item.allocatedPercent = userList[index].allocatedPercent;
                return item;
            });
            this.getPieChartsData();

            this.vGpuAllocatedGraphList = vGpuAllocatedGraphList;
        }
    }

};
</script>


